<template>
    <div class="background">
        <div class="a">
            <input type="text" placeholder="用户名" v-model="data.user.name"><br/>
            <input type="password" placeholder="密  码" v-model="data.user.pwd"><br/>
            <button @click="LogIn">登录</button>
        </div>
    </div>
</template>

<script setup>

import {useStore} from 'vuex'
import router from "@/router";
import axios from 'axios';
import { ElMessage } from 'element-plus'
import {  reactive,onMounted } from 'vue';

const store = useStore()
const data = reactive({
    user: {
        name: '',
        pwd: ''
    }
})

function LogIn(){
    axios.get(`http://localhost:8080/getUser/${data.user.name}/${data.user.pwd}`).then(res=>{
        if(res.data[0]!=null){
            store.state.user=res.data[0]
            localStorage.setItem("user",JSON.stringify(res.data[0]))
            ElMessage({
                message: '登录成功！',
                type: 'success',
            })
            router.push('/homes')
            console.log(res.data[0]);
        }else{
            ElMessage.error('账户名或密码错误！')
        }
    }).catch(error=>{
        console.log(error);
    })
}

onMounted(() => {
    if (localStorage.getItem("user")!=null) {
        router.push('/homes')
        ElMessage({
            message: '登录成功！'+"当前用户："+JSON.parse(localStorage.getItem("user")).userName,
            type: 'success',
        })
    }
    
})



</script>

<style scoped>
.a{
    width: 500px;
    height: 250px;
    background-color: blueviolet;
    background: rgba(18, 37, 18, .5);
    text-align: center; /*可以让盒子内容（文字 行内元素 行内块元素）居中对齐*/
    border-radius:10px;
    margin-left: 35%;
    margin-top: 15%;

}
input{
    
    margin-top: 10%;
}
button{
    width: 100px;
    border-radius:5px;
    margin-top: 10%;
    background-color: rgb(149, 149, 208);
}
*{
  margin: 0px;
  padding: 0px;
}
.background{
    width:100%;  
    height:100%;  /**宽高100%是为了图片铺满屏幕 */
    background-image: url('../assets/img.jpg') ;
    background-size:100% 100%;
    z-index:-1;
    position: absolute;
}


</style>